<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Product Detail</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link th:href="@{/css/custom.css}" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/page/home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/page/orders">Orders</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/page/products">Product</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/page/members">Member</a>
            </li>
        </ul>
    </div>
</nav>

<!-- Main Content -->
<div class="container mt-4">
    <h1 class="h2">Product Detail</h1>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title" id="productName"></h5>
            <p class="card-text" id="productPrice"></p>
            <p class="card-text" id="productCategory"></p>
            <p class="card-text" id="productDescription"></p>
            <button class="btn btn-primary" id="addToCartButton">Add to Cart</button>
            <input type="number" id="quantityInput" class="form-control" placeholder="Quantity" min="1" value="1" style="width: 100px; display: inline-block;">
            <button class="btn btn-success" id="buyNowButton">Buy Now</button>
        </div>
    </div>
</div>

<!-- Bootstrap JS and dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
        const productId = window.location.pathname.split('/').pop();
        $.ajax({
            url: '/order/product/detail/' + productId,
            method: 'GET',
            success: function(response) {
                var data = response.data; // Extract data from response
                $('#productName').text(data.name);
                $('#productPrice').text('Price: $' + data.price);
                $('#productCategory').text('Category: ' + data.category);
                $('#productDescription').text('Description: ' + data.description);
            },
            error: function(error) {
                console.error('Error loading product details:', error);
            }
        });

        // Add to cart button click event
        $('#addToCartButton').click(function() {
            window.location.href = '/page/cart';
        });

        // Buy now button click event
        $('#buyNowButton').click(function() {
            const quantity = $('#quantityInput').val(); // Get quantity from input field
            localStorage.setItem('quantity', quantity); // Store quantity in local storage
            window.location.href = '/page/order_confirmation/' + window.location.pathname.split('/').pop(); // Redirect to order confirmation page
        });

        $(document).on('click', '.delete-order', function() {
            var orderId = $(this).data('id');
            if (confirm('Are you sure you want to delete this order?')) {
                $.ajax({
                    url: '/order/delete/' + orderId,
                    method: 'DELETE',
                    success: function(response) {
                        console.log('Order deleted successfully:', response.data);
                        window.location.href = '/page/orders'; // Redirect to orders page after deleting order
                    },
                    error: function(error) {
                        console.error('Error deleting order:', error);
                        alert('Error deleting order: ' + error.responseText);
                    }
                });
            }
        });

    });
</script>

</body>
</html>